<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>推荐位管理</el-breadcrumb-item>
        <el-breadcrumb-item>tab内容配置</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <basic-container>
      <div>
        <!-- 版本 -->
        <h4>请选择tab版本:</h4> 
        <el-select
          v-model="selectVersion"
          placeholder="请选择版本"
          @change="selectTabListByVersion"
          size="mini"
        >
          <el-option
            v-for="(e, i) in versionList"
            :key="i"
            :label="e.app_version"
            :value="e.app_version"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="language"
          placeholder="请选择版本"
          @change="selectTabListByVersion"
          size="mini"
        >
          <el-option
            v-for="(e, i) in languageList"
            :key="i"
            :label="e.txt"
            :value="e.value"
          >
          </el-option>
        </el-select>
        <el-button @click="selectTabListByVersion" size="mini" icon="el-icon-refresh">刷新tab</el-button>
        <br />
        <br />
        <!-- tab -->
        <el-radio-group v-model="tab_id" class="toptab" @change="tabChange">
          <el-radio-button
            class="tabbutton"
            :label="e.id"
            v-for="(e, i) in tabList"
            :key="i"
          >
            <el-tag size="small" class="tag" v-if="e.tab_type == 1"
              >常驻<font v-if="e.is_online==0" style="color: red;">(下线)</font></el-tag
            >
            <el-tag size="small" class="tag" v-else-if="e.tab_type == 2"
              >普通<font v-if="e.is_online==0" style="color: red;">(下线)</font></el-tag
            >
            <el-tag size="small" class="tag" v-if="e.tab_type == 3"
              >h5<font v-if="e.is_online==0" style="color: red;">(下线)</font></el-tag
            >
            {{ e.tab_title }}
          </el-radio-button>
        </el-radio-group>
        <el-divider class="topline"></el-divider>
        <br />
        <br />
      </div>
      <!-- tab类型为h5时 -->
      <div v-if="selectTab.tab_type == 3">
        <el-tag type="danger">* h5类型tab请去tab列表进行管理</el-tag>
        <el-table :data="[selectTab]" border style="width: 100%">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="app_version" label="app版本">
          </el-table-column>
          <el-table-column prop="tab_title" label="h5名称"></el-table-column>
          <el-table-column prop="jump_url" label="h5链接"> </el-table-column>
          <el-table-column prop="start_date" label="开始日期">
          </el-table-column>
          <el-table-column prop="end_date" label="结束日期"> </el-table-column>
        </el-table>
      </div>
      <!-- tab类型为常驻或普通时 -->
      <avue-crud
        v-else-if="selectTab.tab_type != 3"
        ref="crud"
        :data="data"
        v-model="form"
        :option="option"
        :page.sync="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-reset="from = {}"
        @search-change="searchChange"
        @row-update="rowUpdate"
        @row-save="rowSave"
        @row-del="rowDel"
      >
        <!-- 自定义搜索框 -->
        <template slot-scope="scope" slot="m_idSearch">
          <avue-cascader
            v-model="from.m_id"
            :show-all-levels="false"
            :dic="moduleSelectList"
          ></avue-cascader>
        </template>

        <!--自定义表单 -->
        <template slot-scope="scope" slot="m_idForm">
          <avue-cascader
            @change="changeModuleName"
            :show-all-levels="false"
            :dic="moduleSelectList"
          ></avue-cascader>
        </template>
        <!-- 自定义菜单按钮 -->
        <template slot-scope="{ type, size, row }" slot="menu">
          <el-button
            :size="size"
            :type="type"
            @click="setIsOnline(row.is_online == 1 ? 0 : 1, row.id)"
            >{{ row.is_online == 1 ? "下线" : "上线" }}</el-button
          >
        </template>
        <template slot-scope="scope" slot="menuLeft">
          <el-tag type="danger">
            <b>*支持版本向上兼容</b>
          </el-tag>
        </template>
        <template slot="last" slot-scope="scope">
          {{ scope.row.edit_time }}
          <el-tag>{{ scope.row.edit_admin_name }}</el-tag>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>


<script>
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import {
  appConfigTab,
  uploadFile,
  appConfigModuleOrder as baseURL,
  appConfigModule,
} from "@/api/cat/baseUrls";
import { selectVersion,getGroupList } from "@/api/cat/baseUrls";
export default {
  data() {
    return {
      selectVersion: "",
      language: 2,
      selectTab: {
        tab_type: 1,
      },
      tab_id: 0,
      versionList: [],
      languageList: [
        {txt:"英语",value:2},
        {txt:"芬兰语",value:3}
      ],
      tabList: [],
      selectType: 2,
      is_show_url: true,
      moduleSelectList: [],
      page: {
        total: 0,
        pageSize: 10,
        // pageSizes:[1,2,3]
      },
      type: true,
      data: [],
      params: {},
      form: {},
      from:{m_id:[]},
      default: {
        orderByList: "m_order&ASC",
      },
      option: {
        border: true,
        border: true,
        align: "center",
        headerAlign: "center",
        delBtn: true,
        addBtn: true,
        index: true,
        editBtn: true,
        menu: true,
        indexLabel: "编号",
        column: [
          
          
          {
            label: "模块名称",
            prop: "m_id",
            type: "input",
            search: true,
            row: true,
            hide: true,
            searchslot: true,
            formslot: true,
            editDisplay: false,
            rules: [
              {
                required: true,
                message: "tab标题(运营后台显示)必须选择",
              },
            ],
          },
          {
            label: "模块名称",
            prop: "m_name",
            type: "input",
            row: true,
            addDisplay: false,
            editDisplay: true,
            readonly: true,
          },
          {
            label: "顺序",
            prop: "m_order",
            type: "input",
            rules: [
              {
                required: true,
                message: "顺序必须填写",
              },
            ],
          },
           {
            label: "语言类型",
            prop: "language",
            type: "select",
            editDisplay: false,
            editDisabled: true,
            // search: true,
            placeholder: "语言类型",
            dicData: [
              {
                label: "英文",
                value: 2,
              },
              {
                label: "芬兰语",
                value: 3,
              },
            ],
            props: {
              label: "label",
              value: "value",
            },
          },
           {
            label: "用户属性",
            prop: "new_user",
            type: "select",
            editDisplay: false,
            editDisabled: true,
            search: true,
            placeholder: "请选择用户属性",
            dicData: [
              {
                label: "新用户",
                value: 0,
              },
              {
                label: "老用户",
                value: 1,
              },
            ],
            props: {
              label: "label",
              value: "value",
            },
          },
          {
            label: "上线状态",
            prop: "is_online",
            type: "select",
            search: true,
            placeholder: "请选择上线状态",
            value: 1,
            dicData: [
              {
                label: "上线",
                value: 1,
              },
              {
                label: "下线",
                value: 0,
              },
            ],
            rules: [
              {
                required: true,
                message: "上线状态必须填写",
              },
            ],
          },
          {
            label: "开始日期",
            prop: "start_date",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            placeholder: "开始日期",
          },
          {
            label: "结束日期",
            prop: "end_date",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            placeholder: "结束日期",
          },
          {
            label: "最后操作信息",
            prop: "last",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
            readonly: true,
            slot: true,
          },
        ],
      },
    };
  },
  async created() {
    /**初始化版本 */
    this.initVersion();
    this.initModuleSelectList();
  },
  methods: {
    /**获取列表 */
    async getList() {
      this.params.tab_id = this.tab_id;
      this.params.app_version = this.app_version;
      this.loading = true;
      //清空表格列表
      this.data = [];
      //发送请求获取数据
      let response = await common(
        `${baseURL.pageAndParam}`,
        { ...this.params, ...this.default },
        this.page,
        "POST"
      );
      this.page = response.page;
      response.data.forEach((element) => {
        element.select_tab_name_2 = element.select_tab_name;
        element.unselect_tab_name_2 = element.unselect_tab_name;
      });
      this.data = response.data;
      this.loading = false;
    },
    /**保存 */
    async rowSave(row, done, loading) {
      row.tab_id = this.tab_id;
      row.app_version = this.selectVersion;
      if (row.start_time > row.end_time) {
        loading();
        return this.$message.error("开启时间不可大于结束时间");
      }
      delete row["id"];

      let userInfo = this.$store.state.user.userInfo;
      row.edit_admin_name = userInfo.username;
      row.edit_admin_id = userInfo.id;
      row.language = this.language;

      let data = await common(`${baseURL.save}`, row, null, "POST");
      if (data == null) {
        loading();
        return;
      }

      this.getList();
      done();
    },
    /**修改 */
    async rowUpdate(row, index, done, loading) {
      if (row.start_time > row.end_time) {
        loading();
        return this.$message.error("开启时间不可大于结束时间");
      }

      let userInfo = this.$store.state.user.userInfo;
      row.edit_admin_name = userInfo.username;
      row.edit_admin_id = userInfo.id;

      let data = await common(`${baseURL.update}`, row, null, "POST");
      if (data == null) {
        loading();
        return;
      }

      this.getList();
      done();
    },
    /**刷新 */
    refreshChange() {
      this.initModuleSelectList();
      this.initVersion();
    },
    /**删除 */
    rowDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        type: "warning",
      })

        .then(async () => {
          let response = await common(
            `${baseURL.delete}`,
            { id: row.id },
            null,
            "GET"
          );
        })
        .then(() => {
          this.getList();
        });
    },
    async setIsOnline(isOnline, id) {
      await common(
        baseURL.setIsOnline,
        { is_online: isOnline, id },
        null,
        "POST"
      );
      this.getList();
    },
    //设置标签为默认
    setDefault(id) {
      this.$confirm("此操作将修改默认选中, 是否继续?", "提示", {
        type: "warning",
      })
        .then(async () => {
          let response = await common(
            `${baseURL.setDefault}`,
            { id: id },
            null,
            "POST"
          );
        })
        .then(() => {
          this.getList();
        });
    },
    /**初始化版本 */
    async initVersion() {
      let data = await common(selectVersion.selectVersion, null, null, "GET");
      if (data.code == 1) {
        this.versionList = data.data;
        this.selectVersion = data.data[0].app_version;
        /**初始化tab列表 */
        this.selectTabListByVersion();
      }
    },
    /**初始化模块选择列表 */
    async initModuleSelectList() {
      let data = await common(
        appConfigModule.selectIsOrderList+"?language="+this.language,
        null,
        null,
        "GET"
      );
      if (data.code == 1) {
        data.data.forEach((e) => {
          e.children.forEach((e2) => {
            if (e2.children == null || (e2.children !=null && e2.children.length == 0)) {
              delete e2.children;
            }
          });
        });
        this.moduleSelectList = data.data;
      }
    },
    /**根据版本查询对应的tab */
    async selectTabListByVersion() {
      let data = await common(
        appConfigTab.selectTabListByAppVersion,
        { app_version: this.selectVersion,language:this.language },
        null,
        "POST"
      );
      if (data.code == 1) {
        this.tabList = data.data;
        this.tab_id = data.data[0].id;
        if (this.tab_id == 1 || this.tab_id == 4) {
          this.option.addBtn = false;
          this.option.editBtn = false;
          this.option.delBtn = false;
          this.option.menu = false;
        } else {
          this.option.addBtn = true;
          this.option.editBtn = true;
          this.option.delBtn = true;
          this.option.menu = true;
        }
        /**初始化列表 */
        this.getList();
        this.initModuleSelectList();
      }
    },
    /**tab切换 */
    async tabChange(value) {
      let tab = this.tabList.filter((e) => e.id == value)[0];
      this.selectTab = tab;
      if (value == 1 || value == 4) {
        this.option.addBtn = false;
        this.option.editBtn = false;
        this.option.delBtn = false;
        this.option.menu = false;
      } else {
        this.option.addBtn = true;
        this.option.editBtn = true;
        this.option.delBtn = true;
        this.option.menu = true;
      }
      this.getList();
    },
    changeModuleName(e) {
      this.form.m_id = e[1];
    },
    /**搜索 */
    searchChange(params, done) {
      if(this.from.m_id&&this.from.m_id.length==2){
          params.m_id = this.from.m_id[1]
      }
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      if (done) done();
    },
  },
};
</script>
<style>
.topline {
  margin-top: 0;
}

.toptab .tabbutton {
  border-radius: 10;
  margin-right: 50px;
  border: 0.5px solid #dcdfe6 !important;
  border-bottom: 0 !important;
  position: relative;
}
.toptab .tabbutton .tag {
  position: absolute;
  border-radius: 0 !important;
  bottom: 0;
  right: 0;
  width: 100%;
  font-size: 12px;
  height: 40%;
  background-color: #ecf5ff8c;
}

.toptab .tabbutton .el-radio-button__inner {
  border: 0 !important;
  border-radius: 10 !important;
  padding-bottom: 20px;
}
.toptab .tabbutton .el-radio-button__inner {
  border-radius: 0 !important;
  padding-bottom: 20px;
}
</style>

